<template>
  <slide-view
    v-empty="!canShowDetail"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%'}"
    xs-empty-icon="nopermission"
    :xs-empty-text="$t('crm.customer.6b19b469e3a5b4e146dc4f19a23ea613')"
    @afterEnter="viewAfterEnter"
    @close="hideView">
    <div ref="crmDetailMain" v-loading="loading" class="detail-main no-padding">
      <flexbox
        v-if="canShowDetail && detailData"
        direction="column"
        align="stretch"
        class="d-container">
        <wk-detail-header
          :subtitle="$t('crm.customer.d0a053b5eb5798da0554c6168adcd926')"
          :class="{'is-shadow': bodyIsScroll}"
          :title="detailData.customerName"
          :page-list="pageList"
          :dropdowns="handleOperations"
          @command="headerRightClick"
          @pageChange="pageChange">
          <template slot="left">
            <i v-if="detailData.status == 2" class="wk wk-circle-password" />
            <el-tooltip
              v-if="!isSeasDetail"
              :content="detailData.star == 0 ? $t('crm.customer.f8a290df8354bbb94589bf0ad993f792') : $t('crm.customer.3e4467acb89cb831056b95774ad60541')"
              effect="dark"
              placement="top">
              <i
                v-if="detailData.star == 0"
                class="el-icon-star-off focus-icon"
                @click="toggleStar()" />
              <i
                v-else
                class="wk wk-focus-on focus-icon active"
                @click="toggleStar()" />
            </el-tooltip>
          </template>

          <template slot="right">
            <time-piece v-if="showTimer && isCall" />
            <el-button
              v-if="userInfo.loginType != 3"
              class="wk-premium-info-btn"
              data-type="Call">
              <i class="wk wk-icon-lightning-solid wk-premium-info-icon" data-type="Call" />
              <span class="wk-premium-info-label" data-type="Call">{{ $t('crm.customer.07af42d538b3ed82fe3bfc670e7ba81f') }}</span>
            </el-button>

            <el-button
              v-if="showEdit"
              class="head-handle-button"
              type="primary"
              @click="headerRightClick('edit')">
              {{ $t('crm.customer.e549d8a48d622c11d12a96d054d6d888') }}
            </el-button>
            <el-button
              v-if="showGet"
              class="head-handle-button"
              type="primary"
              @click="headerRightClick('get')">
              {{ $t('crm.customer.e7899c380e652af5d6de364823200d97') }}
            </el-button>

            <el-button
              v-if="showAlloc"
              class="head-handle-button"
              @click="headerRightClick('alloc')">
              {{ $t('crm.customer.4a227a7c2477c33c858f8d7b2be5b18e') }}
            </el-button>
            <el-button
              v-if="showDealStatus"
              class="head-handle-button"
              @click="headerRightClick('deal_status')">
              {{ $t('crm.customer.77030d97f29a91d2281ab6f53ab7c5ea') }}
            </el-button>
          </template>
        </wk-detail-header>

        <!-- 标签 -->
        <flexbox v-if="tagInfo" wrap="wrap" class="wk-tags-content">
          <tag-view :value="tagInfo.value" :max-length="Infinity" wrap="wrap">
            <wk-tag
              v-if="!isSeasDetail"
              v-model="tagInfo.value"
              :disabled="tagInfo.disabled"
              :placeholder="tagInfo.placeholder"
              :data="tagInfo"
              :options="tagInfo.setting"
              @change="tagChange($event)">
              <el-tooltip
                slot="reference"
                :content="$t('crm.customer.79bfb68f4e981168a85f8a5e49107ee4')"
                effect="dark"
                placement="top">
                <el-button
                  type="icon"
                  size="small"
                  icon="wk wk-icon-label-solid" />
              </el-tooltip>
            </wk-tag>
          </tag-view>
        </flexbox>

        <!-- 快捷创建 -->
        <wk-quick-create-bar
          v-if="!isSeasDetail"
          :list="activityHandle"
          @command="quickCreateClick" />

        <div class="d-container-body" @scroll="bodyScroll">
          <detail-head-base :list="headDetails" @action="headAction" />
          <relative-stage-records
            :id="id"
            :is-seas="isSeasDetail"
            :crm-type="crmType"
            :is-stage-flow="true"
            :detail="detailData"
            @handle="detailHeadHandle" />
          <flexbox class="left-right-wrap" align="stretch">

            <div class="left">
              <el-tabs v-model="tabCurrentName" nav-mode="more">
                <el-tab-pane
                  v-for="(item, index) in tabNames"
                  :key="index"
                  :label="item.label"
                  :name="item.name"
                  lazy>
                  <template slot="label">
                    <el-badge
                      :value="item.num"
                      :hidden="item.num <= 0"
                      type="primary">
                      <span>{{ item.label }}</span>
                    </el-badge>
                  </template>
                  <!-- 工商信息 -->
                  <business-info-view
                    v-if="item.name === 'BusinessInfoView'"
                    :name="detailData.customerName"
                    style="padding: 0;"
                    :props="{ fillBtnShow: false, isFixed: false, style: {padding: 0, marginBottom: '16px'}, closeShow: false }" />
                  <component
                    :is="item.name"
                    v-else
                    :id="id"
                    :ref="item.name"
                    :detail="detailData"
                    :type-list="logTyps"
                    :pool-id="detailPoolId"
                    :is-seas="isSeasDetail"
                    :crm-type="crmType"
                    :contacts-id.sync="firstContactsId"
                    :ignore-fields="canUseEnterprise ? ['customerName'] : []"
                    @handle="detailHeadHandle"
                    @update-detail="refreshDetail" />
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="right">
              <wk-head-section
                :label="$t('crm.customer.8d9c5dd840361f19439a44c82be8b307')">
                <div class="abstract">
                  <wk-section-item
                    v-for="(item, index) in abstractList"
                    :key="index"
                    :label="item.title">
                    <i
                      v-if="item.helpType"
                      slot="otherLabel"
                      class="wk wk-icon-fill-help wk-help-tips"
                      :data-type="item.helpType"
                      :data-id="item.helpId"
                      @click.stop="" />
                    {{ getDigestFieldValue(item) }}
                  </wk-section-item>
                </div>
              </wk-head-section>
            </div>
          </flexbox>
        </div>
      </flexbox>
    </div>

    <!-- 新建编辑 -->
    <c-r-m-all-create
      v-if="crmCreateShow"
      :action="createActionInfo"
      :crm-type="createCRMType"
      @save-success="editSaveSuccess"
      @close="crmCreateShow=false" />

    <!-- 转移 -->
    <transfer-handle
      v-if="transferDialogShow"
      :props="transferHandleProps"
      :dialog-visible.sync="transferDialogShow"
      @handle="detailHeadHandle({type: 'transfer'})" />

    <!-- 客户分配 -->
    <alloc-handle
      :crm-type="crmType"
      :pool-id="detailPoolId"
      :selection-list="[detailData]"
      :dialog-visible.sync="allocDialogShow"
      @handle="detailHeadHandle({type: 'alloc'})" />

    <!-- 成交状态 -->
    <deal-status-handle
      :value="detailData ? detailData.dealStatus : 0"
      :selection-list="[detailData]"
      :visible.sync="dealStatusShow"
      @handle="detailHeadHandle({type: 'deal_status'})" />

    <!-- 放入公海 -->
    <put-pool-handle
      :visible.sync="putPoolShow"
      :selection-list="[detailData]"
      :crm-type="crmType"
      @handle="detailHeadHandle({type: 'put_seas'})" />

    <!-- 任务创建 -->
    <task-create
      v-if="taskCreateShow"
      :action="taskCreateAction"
      @save="editSaveSuccess"
      @close="taskCreateShow = false"
    />

    <!-- 团队添加 -->
    <teams-handle
      v-if="teamsDialogShow"
      :dialog-visible.sync="teamsDialogShow"
      :props="teamsHandleProps"
      @handle="detailHeadHandle({type: 'team'})" />
  </slide-view>
</template>

<script>
import {
  crmCustomerReadAPI,
  crmCustomerLockAPI,
  crmCustomerDeleteAPI,
  crmCustomerPoolDeleteAPI,
  crmCustomerReceiveAPI
} from '@/api/crm/customer'

import SlideView from '@/components/SlideView'
import TransferHandle from '@/components/Page/SelectionHandle/TransferHandle' // 转移
import DealStatusHandle from '../components/SelectionHandle/DealStatusHandle' // 客户状态修改操作
import PutPoolHandle from '../components/SelectionHandle/PutPoolHandle' // 放入公海
import AllocHandle from '../components/SelectionHandle/AllocHandle' // 公海分配操作

import RelativeStageRecords from '../components/RelativeStageRecords' // 阶段记录
import Activity from '../components/Activity' // 活动
import CRMEditBaseInfo from '../components/CRMEditBaseInfo' // 基本信息
import RelativeContacts from '../components/RelativeContacts' // 相关联系人
import RelativeBusiness from '../components/RelativeBusiness' // 相关商机
import RelativeContract from '../components/RelativeContract' // 相关合同
import RelativeReturnMoney from '../components/RelativeReturnMoney' // 相关回款
import RelativeFiles from '../components/RelativeFiles' // 相关附件
import RelativeHandle from '../components/RelativeHandle' // 相关操作
import RelativeTeam from '../components/RelativeTeam' // 团队成员
import RelativeVisit from '../components/RelativeVisit' // 回访
import RelativeInvoice from '../components/RelativeInvoice' // 发票
import RelativeCallRecord from '../components/RelativeCallRecord' // 呼叫记录
import RelativeAddress from '../components/RelativeAddress' // 相关地址
import RelativeExamine from '../components/RelativeExamine' // 相关费用
import RelativeCustomerMap from '../components/RelativeCustomerMap' // 关系图谱
import BusinessInfoView from '@/components/Premium/BusinessInfo/View'
import RelativeAmountRatio from '../components/RelativeAmountRatio' // 金额比例设置

import CRMAllCreate from '../components/CRMAllCreate' // 新建页面
import TaskCreate from '@/views/oa/taskExamine/task/Create'

import DetailMixin from '../mixins/Detail'
import { separator } from '@/filters/vueNumeralFilter/filters'
import { mapGetters } from 'vuex'

export default {
  // 客户管理 的 客户详情
  name: 'CustomerDetail',
  components: {
    SlideView,
    TransferHandle,
    DealStatusHandle,
    PutPoolHandle,
    AllocHandle,
    Activity,
    RelativeStageRecords,
    CRMEditBaseInfo,
    RelativeContacts,
    RelativeBusiness,
    RelativeContract,
    RelativeReturnMoney,
    RelativeFiles,
    RelativeHandle,
    RelativeTeam,
    RelativeVisit,
    CRMAllCreate,
    RelativeInvoice,
    RelativeCallRecord,
    RelativeAddress,
    RelativeExamine,
    RelativeCustomerMap,
    BusinessInfoView,
    TaskCreate,
    RelativeAmountRatio
  },
  mixins: [DetailMixin],
  props: {
    // 详情信息id
    id: [String, Number],
    poolId: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    },
    /** 呼出信息 */
    modelData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 展示加载loading
      loading: false,
      crmType: 'customer',
      headDetails: [],
      tabCurrentName: 'Activity',
      // 活动操作
      // 首要联系人信息
      firstContactsId: '',

      // 公海规则权限
      poolAuth: {},
      // 客户摘要字段
      abstractList: [
        { title: this.$t('crm.customer.2268e926a1a4d300745b3d029ee2cd48'), field: 'activityCount', helpType: '8', helpId: '156', units: this.$t('crm.customer.f9fad9b8ba0e15e1fd6011df78d34c5c') },
        { title: this.$t('crm.customer.c8ba12f5c54ef549bd5864b928e423b9'), field: 'notFollowUpDay', units: this.$t('crm.customer.1a32acbcbf7048e622fc517b16e8a3ac') },
        { title: this.$t('crm.customer.931d2dbf8939a9f12501545b3f446570'), field: 'businessCount' },
        { title: this.$t('crm.customer.af9da7a148fdb5d34d9acea046f149ad'), field: 'businessMoney', helpType: '8', helpId: '157', units: this.$unit('crm'), isMoney: true },
        { title: this.$t('crm.customer.32046df7f67e4eda66ec8417c8dbd80d'), field: 'contractCount', units: this.$t('crm.customer.63048ea719f58626bfaa95e3f5450a4a') },
        { title: this.$t('crm.customer.1edfda9ea2ec4a6d39fb4f9172ee48fd'), field: 'contractMoney', units: this.$unit('crm'), isMoney: true },
        { title: this.$t('crm.customer.327104e34009f2dd4efdb87741e1b6eb'), field: 'receivablesMoney', units: this.$unit('crm'), isMoney: true },
        { title: this.$t('crm.customer.2e3ec69a068d3174bd134866056b2ff3'), field: 'receivablesUnreceivedMoney', units: this.$unit('crm'), isMoney: true },
        { title: this.$t('crm.customer.99902489d721e3c01e1f1cef3ad2f301'), field: 'invoiceMoney', units: this.$unit('crm'), isMoney: true }
      ],

      // 工商信息
      businessInfoViewShow: false,
      allocDialogShow: false, // 公海分配操作提示框
      dealStatusShow: false, // 成交状态修改框
      putPoolShow: false // 客户放入公海
    }
  },
  computed: {
    ...mapGetters([
      'isWxUser'
    ]),
    // 展示成交状态
    showDealStatus() {
      return !this.isSeasDetail && this.$auth('crm.customer.dealStatus')
    },

    // 展示领取
    showGet() {
      return this.isSeasDetail && this.getOperationsPermision('get')
    },

    // 展示分配
    showAlloc() {
      return this.isSeasDetail && this.getOperationsPermision('alloc')
    },

    // 活动操作
    activityHandle() {
      const temps = [
        {
          command: 'task',
          icon: 'wk wk-icon-task-line',
          label: this.$t('crm.customer.2c442a827cc408e3351f713723aeca2d'),
          auth: 'oa.taskExamine'
        },
        {
          command: 'contacts',
          icon: 'wk wk-contacts-line',
          label: this.$t('crm.customer.5341185d6215a708a64d912462164200'),
          auth: 'crm.contacts.save'
        },
        {
          command: 'business',
          icon: 'wk wk-business-line',
          label: this.$t('crm.customer.4170bc08c140f5352358c00c2345cc6a'),
          auth: 'crm.business.save'
        },
        {
          command: 'contract',
          icon: 'wk wk-contract-line',
          label: this.$t('crm.customer.62de551180e2604fb6810b5ea46acb3e'),
          auth: 'crm.contract.save'
        },
        {
          command: 'receivables',
          icon: 'wk wk-receivables-line',
          label: this.$t('crm.customer.859c7e7fd5f87a1c39d16504ad74983a'),
          auth: 'crm.receivables.save'
        },
        {
          command: 'team',
          icon: 'wk wk-icon-s-seas-line',
          label: '添加团队成员',
          auth: `crm.${this.crmType}.teamsave`
        }
      ]

      // if (this.canCreateFollowRecord) {
      //   temps = [{
      //     command: 'log',
      //     label: '写跟进'
      //   }].concat(temps)
      // }

      return temps.filter(item => {
        return !item.auth || this.$auth(item.auth)
      })
    },

    // 可操作选项
    handleOperations() {
      return this.getOperations(this.isSeasDetail ? ['delete'] : [
        'transfer',
        'put_seas',
        'lock',
        'unlock',
        'delete'
      ])
    },

    // tabs
    tabNames() {
      var tempsTabs = []
      tempsTabs.push({ label: this.$t('crm.customer.62475a69886cfa19e0fb0e9c04bde058'), name: 'Activity' })
      if (this.crm.customer && this.crm.customer.read) {
        tempsTabs.push({ label: this.$t('crm.customer.1ce7eda6c950b1a22d394da2670b9a6f'), name: 'CRMEditBaseInfo' })
      }
      tempsTabs.push({ label: this.$t('crm.customer.f56086d15712ac6279499554a73b633b'), name: 'BusinessInfoView' })
      tempsTabs.push({ label: '客户关系', name: 'RelativeCustomerMap' })
      if (this.crm.contacts && this.crm.contacts.index) {
        tempsTabs.push({ label: this.$t('crm.customer.f6662be052656de56d131d94239a0fd9'), name: 'RelativeContacts', num: this.tabsNumber.contactCount })
      }

      tempsTabs.push({ label: this.$t('crm.customer.fd9af705d7e19f13b56dfdec32b56cbb'), name: 'RelativeTeam', num: this.tabsNumber.memberCount })

      if (this.crm.business && this.crm.business.index) {
        tempsTabs.push({ label: this.$t('crm.customer.64df3afd935952789ced03077cb7b71b'), name: 'RelativeBusiness', num: this.tabsNumber.businessCount })
      }

      if (this.crm.contract && this.crm.contract.index) {
        tempsTabs.push({ label: this.$t('crm.customer.eecd89b46b8d8917ded1db05f3997217'), name: 'RelativeContract', num: this.tabsNumber.contractCount })
      }
      if ((this.crm.receivables && this.crm.receivables.index) || (this.crm.receivablesPlan && this.crm.receivablesPlan.index)) {
        tempsTabs.push({ label: this.$t('crm.customer.8a1a57de9227b9814e8676c4344a6470'), name: 'RelativeReturnMoney', num: this.tabsNumber.receivablesCount })
      }
      if (this.crm.visit && this.crm.visit.index) {
        tempsTabs.push({ label: this.$t('crm.customer.cb4fdc8d54d2a00ab843cb298ea5352c'), name: 'RelativeVisit', num: this.tabsNumber.returnVisitCount })
      }
      if (this.$store.state.crm.isCall) {
        tempsTabs.push({ label: this.$t('crm.customer.c71eb36a5b0ffd51a3ddb53827f985a6'), name: 'RelativeCallRecord', num: this.tabsNumber.callRecordCount })
      }
      if (this.crm.invoice && this.crm.invoice.index) {
        tempsTabs.push({ label: this.$t('crm.customer.f6bdc52c0e573e7567a0f8e116fd235a'), name: 'RelativeInvoice', num: this.tabsNumber.invoiceCount })
      }

      tempsTabs.push({ label: this.$t('crm.customer.ef10d2a67a3a735a5481dbb665db2d33'), name: 'RelativeAddress' })
      tempsTabs.push({ label: this.$t('crm.customer.3f0d15ff86a8b7d4025a0c3384394614'), name: 'RelativeExamine' })
      if (!this.isSeasDetail) { // 公海客户不添加
        tempsTabs.push({ label: '金额比例设置', name: 'RelativeAmountRatio' })
      }
      tempsTabs.push({ label: this.$t('crm.customer.f7bd5289415b686d12204fe25426fad4'), name: 'RelativeFiles', num: this.tabsNumber.fileCount })
      if (this.userInfo.loginType != 3) {
        tempsTabs.push({ label: this.$t('crm.customer.6542272a68a2e041f5ac9611017d3d68'), name: 'RelativeHandle', num: 0 })
      }
      return tempsTabs
    },

    // 根据记录筛选
    logTyps() {
      let logTypslist = []
      logTypslist = [
        {
          icon: 'all',
          color: '#2362FB',
          command: '',
          label: this.$t('crm.customer.e9f31ce4962a7e3a7398c41cbce3233f')
        },
        {
          icon: 'customer',
          color: '#487DFF',
          command: 2,
          label: this.$t('crm.customer.77de708765f15571fe40373f63881165')
        },
        {
          icon: 'o-task',
          color: '#D376FF',
          command: 11,
          label: this.$t('crm.customer.8c2955f5e5362a8cc7fcb1ebfefdd9fa')
        },
        {
          icon: 'business',
          color: '#FB9323',
          command: 5,
          label: this.$t('crm.customer.375f4b0886b2f49374741e60abac3900')
        },
        {
          icon: 'contract',
          color: '#FD5B4A',
          command: 6,
          label: this.$t('crm.customer.b86ed80ecd08fe806ed622d7ac302f53')
        },
        {
          icon: 'contacts',
          color: '#27BA4A',
          command: 3,
          label: this.$t('crm.customer.fa2bcf086f536d5782f46e85e2808682')
        },
        {
          icon: 'receivables',
          color: '#FFB940',
          command: 7,
          label: this.$t('crm.customer.3b8165683a14cdc69b2b800bddcccb1d')
        },
        {
          icon: 'log',
          color: '#5864FF',
          command: 8,
          label: this.$t('crm.customer.d7230103f6159c58d68b55d45d3d3838')
        },
        {
          icon: 'approve',
          color: '#9376FF',
          command: 9,
          label: this.$t('crm.customer.e5cee76972fe4f707d6ac320801d9b35')
        }
      ]
      if (this.$store.state.crm.isCall) {
        logTypslist.push({
          icon: 'phone',
          color: '#9376FF',
          command: 13,
          label: this.$t('crm.customer.98ffdf4499c0bed6e0c8cd8ec693e328')
        })
      }
      return logTypslist
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    /**
     * 详情
     */
    getDetial() {
      this.firstContactsId = ''
      this.loading = true
      const params = {
        customerId: this.id
      }

      if (this.poolId) {
        params.poolId = this.poolId
      }

      crmCustomerReadAPI(params)
        .then(res => {
          this.loading = false
          const resData = res.data || {}
          this.detailData = resData
          this.firstContactsId = this.detailData.contactsId
          // 公海权限
          this.poolAuth = resData.poolAuthList || {}
          // 负责人
          const headDetails = [{ title: this.$t('crm.customer.de96f1a0878890c04f6e43408f7ed519'), value: '' },
            { title: this.$t('crm.customer.1c5f073956ce191ede594bb6af0a8167'), value: '' },
            { title: this.$t('crm.customer.53fdc8e95240ff5cdf406f1ba4985c63'), value: '', formType: 'user' },
            { title: this.$t('crm.customer.5052176127968fd43b4e0c46f2691e2f'), value: '' }]
          headDetails[0].value = this.detailData.level

          const dealItem = headDetails[1]
          if (this.detailData.dealStatus === null || this.detailData.dealStatus === '' || this.detailData.dealStatus === undefined) {
            dealItem.showIcon = false
            dealItem.value = ''
          } else {
            dealItem.showIcon = true
            if (this.detailData.dealStatus == 1) {
              dealItem.icon = 'deal-suc'
              dealItem.style = {
                fontSize: '14px',
                color: '#20b559',
                marginRight: '3px'
              }
              dealItem.value = this.$t('crm.customer.b0efe83811135c3c5424d29994bfb7fb')
            } else {
              dealItem.icon = 'deal-un'
              dealItem.style = {
                fontSize: '14px',
                color: '#f95a5a',
                marginRight: '3px'
              }
              dealItem.value = this.$t('crm.customer.b0940a1c977b2bc7d8168274ae628208')
            }
          }

          headDetails[2].title = this.isSeasDetail ? '前负责人' : this.$t('crm.customer.58ab7230fb7e5f3069917e9e16f75466')
          headDetails[2].value = this.isSeasDetail ? this.detailData.preOwnerUserName : this.detailData.ownerUserName
          const contactObj = headDetails[3]
          if (this.firstContactsId) {
            contactObj.value = this.detailData.contactsName
            headDetails.push({
              showPhone: true,
              title: this.$t('crm.customer.e75961df59e41a80029ed535dbac4ccb'),
              value: this.detailData.contactsMobile,
              helpObj: {
                type: '8',
                id: '103'
              }
            })
          } else if (!this.isSeasDetail) {
            contactObj.addShow = true
            contactObj.addType = 'contacts'
            contactObj.helpObj = {
              type: '8',
              id: '103'
            }
          }

          this.headDetails = headDetails
        })
        .catch(() => {
          this.loading = false
          this.hideView()
        })
    },

    /**
     * 关闭
     */
    hideView() {
      this.$emit('hide-view')
    },

    /**
     * 格式化客户摘要字段值
     * @param item
     * @return {string}
     */
    getDigestFieldValue(item) {
      if (!this.detailData || !this.detailData.digest) return ''
      let value = this.detailData.digest[item.field]
      if (item.isMoney) {
        value = separator(this.$money('crm', value))
      }
      return `${value}${item.units || ''}`
    },

    /* ------------------------ 头部事件 ------------------------ */

    /**
     * 首要联系人添加
     */
    addChieflyContacts() {
      this.createCRMType = 'contacts'
      this.createActionInfo = {
        type: 'relative',
        crmType: this.crmType,
        data: { customer: this.detailData }
      }
      this.crmCreateShow = true
    },

    /**
     * 详情头部操作
     */
    headAction(type) {
      if (type === 'contacts-add') {
        this.quickCreateClick('contacts')
      }
    },

    /**
     * @description: 头部右侧点击事件
     * @param {*}
     * @return {*}
     */
    headerRightClick(type) {
      if (type === 'transfer') {
        this.transferDialogShow = true
      } else if (type === 'edit') {
        this.createCRMType = this.crmType
        this.createActionInfo = {
          type: 'update',
          id: this.id,
          batchId: this.detailData.batchId
        }
        this.crmCreateShow = true
      } else if (type === 'deal_status') {
        this.dealStatusShow = true
      } else if (type == 'put_seas') {
        // 客户放入公海
        this.putPoolShow = true
      } else if (type === 'lock' || type === 'unlock') {
        this.$confirm({
          lock: this.$t('crm.customer.f63be9eeece26e84ea120ecf1868435d'),
          unlock: this.$t('crm.customer.051c7580b5f730d1d2b3fbf81eb73920')
        }[type], this.$t('crm.customer.f652a03ec559bd4c6edc158cc5fd922c'), {
          confirmButtonText: this.$t('crm.customer.2147aedb51921334afe4a1f4a36b2d54'),
          cancelButtonText: this.$t('crm.customer.694026e67eca166b20e25e498d4bb031'),
          type: 'warning'
        })
          .then(() => {
            const status = type === 'lock' ? 2 : 1 // 1是正常 2 是锁定
            crmCustomerLockAPI({
              status,
              ids: this.id
            })
              .then(res => {
                this.$message({
                  type: 'success',
                  message: this.$t('crm.customer.2a01a2c426f8eba36828ce9ff983c32c')
                })
                this.$set(this.detailData, 'status', status)
                this.detailHeadHandle({ type })
              })
              .catch(() => {})
          })
          .catch(() => {})
      } else if (type == 'delete') {
        if (this.isSeasDetail) {
          this.$confirm(
            this.$t('crm.customer.5782c5c7c5c5627247d0d5e83d8430e3'),
            this.$t('crm.customer.518e13413c5ceffa5b33a97d612fc3aa'),
            {
              confirmButtonText: this.$t('crm.customer.376d1b6cf92bc6a75ee91bc8615d4c38'),
              cancelButtonText: this.$t('crm.customer.e2f94dbd1fe311450044e32876c05426'),
              type: 'warning'
            }
          )
            .then(() => {
              crmCustomerPoolDeleteAPI({
                poolId: this.detailPoolId,
                ids: [this.id]
              })
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: this.$t('crm.customer.1ef59c468fa7574b36f612df36db9260')
                  })
                  this.detailHeadHandle({ type })
                })
                .catch(() => {})
            })
            .catch(() => {})
        } else {
          this.$confirm(
            this.$t('crm.customer.bc6d79d8d74d5586c7fc0a61a7600094'),
            this.$t('crm.customer.b1775c0df8cfc6b94ca1d66e6364f7b2'),
            {
              confirmButtonText: this.$t('crm.customer.fce697575995ca3d44c2bca23a508130'),
              cancelButtonText: this.$t('crm.customer.2181e4afad6e61063b52598fe40b4a0f'),
              type: 'warning'
            }
          )
            .then(() => {
              crmCustomerDeleteAPI([this.id])
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: this.$t('crm.customer.588d9fe977debd22a0ee5dfeb661b45c')
                  })
                  this.detailHeadHandle({ type })
                })
                .catch(() => {})
            })
            .catch(() => {})
        }
      } else if (type == 'alloc') {
        // 公海分配操作
        this.allocDialogShow = true
      } else if (type === 'get') {
        // 领取
        crmCustomerReceiveAPI({
          ids: [this.id],
          poolId: this.detailPoolId
        })
          .then(res => {
            this.$message({
              type: 'success',
              message: this.$t('crm.customer.3b4d3e098f9b2dc9147f4c96977224a1')
            })
            // 刷新待办
            this.$store.dispatch('GetMessageNum')

            this.detailHeadHandle({ type })
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/crmdetail.scss";

.d-container-body {
  margin-top: 8px;
}

.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.1s;
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.wk-circle-password {
  padding: 2px;
  margin-left: 5px;
  font-size: 12px;
  color: white;
  background-color: #f56c6c;
  border-radius: 3px;
  transform: scale(0.6);
}

// 摘要
.abstract {
  padding-bottom: 16px;

  .el-tooltip {
    margin-left: 3px;
  }
}
</style>
